<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>


</head>
<body style="background-image: url('../img/2.jpg') ;background-size:100%;background-repeat: no-repeat;">
<div style="margin-top: -20px;">
    <img src="../img/3.png" width="70px" height="70px" style="float: left">
    <h1 style="font-family: 华文彩云;margin-top: 20px;font-size: 70px;">百枝商城</h1>
</div>
<h1 style="margin-left: 700px">登录页面</h1>
<div id="app" style="width:400px;margin-left:560px ; height:500px;text-align: center;font-size: 20px;line-height: 80px;background:rgba(69,77,49,0.29);border-radius: 2rem;">
    <input v-model="user.username" placeholder="       请输入账号" type="text" style="padding-left:20px;width:200px;outline:none;height: 25px;border:none;background: #e7f0f7;border-radius: 2rem;"><br>
    <input v-model="user.password"  placeholder="       请输入密码" type="password" style="padding-left:20px;outline:none;width:200px;height: 25px;border:none;background: #e7f0f7;border-radius: 2rem;"><br>
    <button @click="login" ><font color="white">登录</font></button>
    <br>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            user:{
                username:""
            }
        },
        methods:{
                /*登录方法调用*/
            login(){
                axios.post("http://localhost:8002/backend/user/login",this.user).then(function (res) {
                    var a=res.data.charAt(0);
                    var username=res.data.substring(1);

                    /*判断是否登录成功 成功则跳转至展示页面*/
                    if(a=="1"){
                        alert("用户名或密码不正确");
                    }else {
                        //判断角色 2为运营角色
                        if (a=="2"){
                            location.href="yunying.html";
                        }else{
                            //商品中心角色
                            location.href="yunying.html";
                            }
                    }
                })
            }
        }
    })
</script>
</html>